<template>
  <div class="indexwp">
    <a-layout>
      <a-layout-header class="header">
        <div class="logo">农房乱占耕地核查系统</div>
        <div class="loginOutBox">
          <a-popover placement="bottom">
            <template #content>
              <div
                class="popover-item"
                style="cursor: pointer"
                @click="loginOutFun"
              >
                <Icons.PoweroffOutlined style="margin-right: 5px" />退出系统
              </div>
            </template>
            <div class="userInfo">
              <img src="@/assets/touxiang.jpeg" class="loginIcon" />
              <span class="loginName">admin</span>
            </div>
          </a-popover>
        </div>
      </a-layout-header>
      <a-layout>
        <a-layout-sider
          class="layout-sider"
          width="200"
          collapsedWidth="40"
          :trigger="null"
          v-model:collapsed="state.collapsed"
        >
          <a-menu
            v-model:openKeys="state.openKeys"
            v-model:selectedKeys="state.selectedKeys"
            :style="{ height: '100%', borderRight: 0 }"
            mode="inline"
            :items="slideItems"
            @select="handleSideBar"
          />
        </a-layout-sider>
        <a-layout>
          <div class="bread-container">
            <div @click="toggleCollapsed" class="bread-collapse">
              <Icons.MenuUnfoldOutlined v-if="state.collapsed" />
              <Icons.MenuFoldOutlined v-else />
            </div>
            <a-breadcrumb class="bread-list">
              <a-breadcrumb-item v-for="item in breadList" :key="item.name">{{
                item.meta.title
              }}</a-breadcrumb-item>
            </a-breadcrumb>
          </div>
          <a-layout-content class="layout-scroll_container">
            <router-view></router-view>
          </a-layout-content>
        </a-layout>
      </a-layout>
    </a-layout>
  </div>
</template>
<script lang="ts" setup>
import { reactive, watch, h, ref, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import type { SelectProps } from 'ant-design-vue';
import type { TableProps, TableColumnType } from 'ant-design-vue';
import {
  LaptopOutlined,
  NotificationOutlined,
  CalendarOutlined,
  AppstoreOutlined,
  SettingOutlined,
  UploadOutlined,
  UserOutlined,
} from '@ant-design/icons-vue';
import * as Icons from '@ant-design/icons-vue';
import menuData from '@/mock/menu.js';

const router = useRouter();
const route = useRoute();

// 退出系统
function loginOutFun() {
  router.push({
    name: 'login',
  });
}
// menu
const openKeys = ref([]);
const state = reactive({
  collapsed: false,
  selectedKeys: [],
  openKeys: [],
  preOpenKeys: [],
});
// 递归获取slideItem
const getSlideItems = (arr) => {
  if (!arr) return;
  return arr.map((item) => {
    return {
      key: item.name,
      name: item.name,
      icon: () => h(Icons[item.meta.icon]),
      label: item.meta.title,
      title: item.meta.title,
      children: getSlideItems(item.children),
    };
  });
  return getSlideItems(item.children);
};
const slideItems = ref(getSlideItems(menuData));

const handleSideBar = ({ item }) => {
  if (item.name) {
    router.push({ name: item.name, query: {} });
    getBreadList();
  }
};
watch(
  () => state.openKeys,
  (_val, oldVal) => {
    state.preOpenKeys = oldVal;
  }
);
const toggleCollapsed = () => {
  state.collapsed = !state.collapsed;
  state.openKeys = state.collapsed ? [] : state.preOpenKeys;
};
const resetSelectedKeys = (route) => {
  sideState.selectedKeys = [route.name];
};
/**
 * 面包屑
 */
watch(route, (val) => {
  getBreadList();
});

const breadList = ref([]);
const getBreadList = () => {
  breadList.value = route.matched.filter(
    (item) => item.meta && item.meta.title
  );
};
</script>
<style scoped lang="less">
.indexwp {
  width: 100%;
  min-height: 100vh;
  #components-popover-demo-placement .ant-btn {
    width: 70px;
    text-align: center;
    padding: 0;
    margin-right: 8px;
    margin-bottom: 8px;
  }
}

.layout-sider {
  background: #fff;
  height: calc(100vh - 64px);
  overflow: auto;
}

.layout-scroll_container {
  height: 0;
  min-height: 0;
  box-sizing: border-box;
  overflow: auto;
  padding: 0 18px 18px;
}
.layout-scroll_full {
  width: 100%;
  height: calc(100vh - 64px);
  overflow: auto;
}
.header {
  display: flex;
  align-items: center;
  position: relative;
  .logo {
    color: #fff;
    font-weight: bold;
    font-size: 20px;
    margin-right: 20px;
    white-space: nowrap;
  }
  .loginOutBox {
    position: absolute;
    right: 15px;
    .userInfo {
      display: flex;
      align-items: center;
      height: 46px;
      .loginIcon {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        margin-right: 10px;
      }
      .loginName {
        color: #fff;
      }
    }
  }
}
#components-layout-demo-top-side-2 .logo {
  float: left;
  width: 120px;
  height: 31px;
  margin: 16px 24px 16px 0;
  background: rgba(255, 255, 255, 0.3);
}

.ant-row-rtl #components-layout-demo-top-side-2 .logo {
  float: right;
  margin: 16px 0 16px 24px;
}

.site-layout-background {
  background: #fff;
}
.titles {
  color: #fff;
}
.bread-container {
  display: flex;
  align-items: center;
  padding: 0 18px;

  .bread-collapse {
    font-size: 16px;
    cursor: pointer;
    margin-right: 16px;
  }
  .bread-list {
    margin: 12px 0;
  }
}
</style>
